<template>
  <div class="diy_edit coupon_edits" id="coupon_edit">
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
      class="edit_coupon_form"
      size="large"
    >
      <el-row class="row_e">
        <el-col :lg="8" :sm="12" :xs="24" class="el_form_item_warp">
          <el-form-item label="优惠券名称" prop="coupon_name">
            <el-input
              v-model="form.coupon_name"
              placeholder="请输入优惠券名称"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :sm="12" :xs="24" class="el_form_item_warp">
          <el-form-item label="优惠券金额" prop="contact_phone">
            满
            <el-input
              style="width: 100px !important"
              v-model="form.coupon_price"
              type="number"
            ></el-input>
            减
            <el-input
              style="width: 100px !important"
              v-model="form.coupon_price1"
              type="number"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :sm="12" :xs="24" class="el_form_item_warp">
          <el-form-item label="有效期" prop="contact_address">
            <el-date-picker
              style="border: 1px solid #cccccc !important; border-radius: 0"
              v-model="form.coupon_time"
              type="datetimerange"
              
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :lg="8" :sm="12" :xs="24" class="el_form_item_warp">
          <el-form-item label="优惠券类型" prop="description">
            <el-select v-model="form.coupon_type" placeholder="请选择类型">
              <el-option
                v-for="item in list_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :sm="12" :xs="24" class="el_form_item_warp">
          <el-form-item label="卖家" prop="description">
            <el-select
              v-model="form.coupon_user_id"
              placeholder="请选择卖家"
              :disabled="user_group === '卖家'"
            >
              <el-option
                v-for="item in list_user"
                :key="item.user_id"
                :label="item.nickname"
                :value="item.user_id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="Onsubmit" size="large"
          >提交</el-button
        >
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  
  $get_auth,
  func,
  paramsFun,
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
  $getUrlParams,
  filterSensitiveWords,
} from "@/utils/utils.js";
let router = useRouter();
let store = useStore();
let token = storageHelper.getToken() || null;
let UserInfo = storageHelper.getUserInfo();
let user_id = storageHelper.getUserInfo().user_id;
let user_group = storageHelper.getUserInfo().user_group;
let coupon_id = $getUrlParams().coupon_id;
let url_add = ref("/api/coupon/add");
let url_set = ref("/api/coupon/set");
let url_upload = ref("/api/coupon/upload");
let url_get_obj = ref("/api/coupon/get_obj");
let title = ref("coupon");
let field = ref("coupon_id");
let list_user = ref([]);
let list_type = ref([
  {
    value: "满减",
    label: "满减",
  },
]);

let form = ref({
  coupon_name: "",
  coupon_price: "",
  coupon_price1: "",
  coupon_time: "",
  coupon_type: "满减",
  coupon_user_id: "",
  coupon_user_auth: "",
});

let ruleFormRef = ref(null);
let rules = ref({
  coupon_name: [
    {
      required: true,
      message: "优惠券名称不能为空",
      trigger: "blur",
    },
  ],
});
// 点击取消
let cancel = () => {
  router.push("./table");
};
// 点击提交
let Onsubmit = async () => {
  submit_before();
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    if (coupon_id) {
      // 编辑
      delete form.value.update_time;
      $post(url_set.value + "?coupon_id=" + coupon_id, form.value).then(
        (res) => {
          if (res.result) {
            ruleFormRef.value.resetFields();
            router.push("./table");
            ElMessage.success("提交成功！");
          } else if (res.error) {
            ElMessage.error(res.error.message);
          }
        }
      );
    } else {
      // 新增
      $post(url_add.value, form.value).then((res) => {
        if (res.result) {
          ruleFormRef.value.resetFields();
          router.push("./table");
          ElMessage.success("提交成功！");
        } else if (res.error) {
          ElMessage.error(res.error.message);
        }
      });
    }
  } else {
    ElMessage.error(msg);
  }
};
let submit_before = () => {
  form.value.coupon_time = form.value.coupon_time.join(",");
  list_user.value.forEach((value) => {
    if (user_id == form.value.coupon_user_id) {
      form.value.coupon_user_auth = user_group;
    }
  });
};
// 获取详情
let get_coupon_obj = async () => {
  var list = await $get("/api/coupon/get_obj?coupon_id=" + coupon_id);
  form.value = list.result.obj;
  form.value.coupon_time= list.result.obj.coupon_time.split(",")
};
//  获取用户
let get_list_user = async () => {
  var json = await $get("/api/user/get_list?");
  if (json.result) {
    list_user.value = json.result.list;
  } else if (json.error) {
    console.error(json.error);
  }
};
onMounted(() => {
  form.value.coupon_user_id = user_id;
  form.value.coupon_user_auth = user_group;
  get_list_user();
  if(coupon_id){
	get_coupon_obj();
  }
});
</script>

<style scoped lang="less">
.diy_edit {
  width: 100%;
  .edit_coupon_form {
    max-width: 80%;
    margin: 90px auto;
    .fn {
      width: 100%;
    }
  }
  img {
    width: 100px;
    height: 100px;
  }
  .edit_list_coupon_sell {
    width: 80%;
    margin: 90px auto;
  }
  .footer {
    text-align: center;
  }
}
</style>
